<template>
  <div id="app">
    <h1>商场后台管理系统</h1>
    <button @click="showPromotions = true">查看营销推广活动</button>
    
    <div v-if="showPromotions" class="promotion-management">
      <h2>营销推广活动</h2>
      <ul>
        <li v-for="(item, index) in promotions" :key="index">
          {{ item.name }} - {{ item.description }}
          <button class="edit-btn" @click="showEditModal(index)">编辑</button>
          <button class="delete-btn" @click="deletePromotion(index)">删除</button>
        </li>
      </ul>
      <button @click="showAddModal = true">添加活动</button>
    </div>

    <!-- 添加活动模态框 -->
    <div class="add-modal" v-if="showAddModal" @click.self="showAddModal = false">
      <div class="modal-content" @click.stop>
        <span class="close" @click="showAddModal = false">&times;</span>
        <h3>添加新活动</h3>
        <input type="text" v-model="newPromotionName" placeholder="活动名称" />
        <input type="text" v-model="newPromotionDescription" placeholder="活动描述" />
        <button @click="addPromotion">添加</button>
      </div>
    </div>

    <!-- 编辑活动模态框 -->
    <div class="edit-modal" v-if="showEditModalIndex >= 0" @click.self="showEditModalIndex = -1">
      <div class="modal-content" @click.stop>
        <span class="close" @click="showEditModalIndex = -1">&times;</span>
        <h3>编辑活动</h3>
        <input type="text" v-model="currentPromotion.name" placeholder="活动名称" />
        <input type="text" v-model="currentPromotion.description" placeholder="活动描述" />
        <button @click="saveEditPromotion">保存</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showPromotions: false,
      showAddModal: false,
      showEditModalIndex: -1,
      newPromotionName: '',
      newPromotionDescription: '',
      currentPromotion: { name: '', description: '' },
      promotions: [
        { name: "优惠活动1", description: "满减优惠" },
        { name: "优惠活动2", description: "折扣优惠" },
        { name: "优惠活动3", description: "买赠优惠" },
      ],
    };
  },
  methods: {
    showPromotions() {
      this.showPromotions = true;
    },
    showEditModal(index) {
      this.currentPromotion = { ...this.promotions[index] };
      this.showEditModalIndex = index;
    },
    saveEditPromotion() {
      if(this.currentPromotion.name && this.currentPromotion.description) {
        this.promotions[this.showEditModalIndex] = this.currentPromotion;
        this.showEditModalIndex = -1;
      }
    },
    deletePromotion(index) {
      if (confirm('确定要删除该推广活动吗？')) {
        this.promotions.splice(index, 1);
      }
    },
    addPromotion() {
      if (this.newPromotionName && this.newPromotionDescription) {
        this.promotions.push({
          name: this.newPromotionName,
          description: this.newPromotionDescription,
        });
        this.newPromotionName = '';
        this.newPromotionDescription = '';
        this.showAddModal = false;
      }
    },
  },
};
</script>

<style scoped>
#app {
  font-family: 'Arial', sans-serif;
  text-align: center;
  padding: 20px;
  max-width: 1000px; /* Increased max-width for a larger frame */
  margin: 20px auto; /* Added top and bottom margin */
}

h1, h2 {
  color: #333;
}

.promotion-management {
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 20px;
}

ul {
  list-style: none;
  padding: 0;
}

li {
  margin-bottom: 10px;
}

button {
  margin: 5px;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  background-color: #5cb85c;
  color: white;
  cursor: pointer;
  transition: background-color 0.3s;
}

button:hover {
  background-color: #4cae4c;
}

button:active {
  background-color: #449d44;
}

.edit-btn, .delete-btn {
  background-color: #f0ad4e;
  margin-right: 5px; /* Added margin for spacing */
}

.edit-btn:hover {
  background-color: #eea236;
}

.delete-btn {
  background-color: #d9534f;
}

.delete-btn:hover {
  background-color: #d2322d;
}

.add-modal, .edit-modal {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-content {
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
  width: 300px;
}

.close {
  float: right;
  cursor: pointer;
}

/* Responsive styles */
@media (max-width: 768px) {
  #app {
    padding: 10px;
    max-width: 100%;
  }

  .modal-content {
    width: 90%;
  }
}
</style>